/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/05/17
*@description
*@rule
 */

.auto-textarea-wrapper
  position relative
  width 100%
  margin 0
  padding 0
  line-height normal
  .auto-textarea-block
    display block
    white-space pre-wrap
    word-wrap break-word !important
    visibility hidden
    overflow hidden
    margin 0
    padding 0
    box-sizing border-box
    font-size 100%
  .auto-textarea-input
    font-family Menlo, "Ubuntu Mono", Consolas, "Courier New", "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    margin 0
    padding 0
    overflow-y hidden
    color #2C3E50
    &.no-border
      outline 0 none
      border none !important
    &.no-resize
      resize none

@import "./scroll.styl";
@import "./mavon-editor.styl";
@import "./md-toolbar-left.styl";
@import "./fontello.styl";
@import "./md.styl";


.aty-markdown
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  textarea, div
    float: left;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  textarea
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: 'Monaco', courier, monospace;
    padding: 20px;
  code
    color: #f66;
  .auto-textarea-wrapper
    height: 100%;



.hljs {
  display: block;
  overflow-x: auto;
  padding: .5em;
  color: #abb2bf;
  background: #282c34
}

.hljs-comment,.hljs-quote {
  color: #5c6370;
  font-style: italic
}

.hljs-doctag,.hljs-formula,.hljs-keyword {
  color: #c678dd
}

.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst {
  color: #e06c75
}

.hljs-literal {
  color: #56b6c2
}

.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string {
  color: #98c379
}

.hljs-built_in,.hljs-class .hljs-title {
  color: #e6c07b
}

.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {
  color: #d19a66
}

.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title {
  color: #61aeee
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: 700
}

.hljs-link {
  text-decoration: underline
}

/******************************************************************************
*
*
*
*******************************************************************************/


.mdContainer {
  width: 100%;
  height: 100%;
  background: #add8e6
}

.mdContainer.fullPage {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0
}

.mdContainer .navContainer {
  width: 100%;
  height: 36px;
  background: #fff;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px
}

.mdContainer .navContainer .nameContainer {
  color: #add8e6;
  margin-right: 10px;
  cursor: pointer
}

.mdContainer .navContainer .markContainer {
  width: auto;
  height: 100%;
  margin-left: 0
}

.mdContainer .navContainer .markContainer ul.markListGroup {
  height: 100%;
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.mdContainer .navContainer .markContainer ul.markListGroup li.markListItem {
  list-style: none;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #333
}

.mdContainer .navContainer .markContainer ul.markListGroup li.markListItem:hover {
  background: #eee
}

.mdContainer .mdBodyContainer {
  width: 100%;
  height: calc(100% - 36px);
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box
}

.mdContainer .mdBodyContainer.noMenu {
  height: 100%
}

.editContainer {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  background: #333;
  color: #fff;
  padding: 10px
}

.editContainer .mdEditor {
  height: 100%;
  width: 100%;
  background: transparent;
  outline: none;
  color: #fff;
  resize: none
}

.previewContainer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: auto;
  padding: 10px
}






